<!-- 周群-天算 -->
<template>
  <h4>请选择要悄悄作弊的签</h4>
  <div class="content">
    <p>
      <span @click="choose = 1" :class="choose === 1 ? 'choosed' : ''"
        >上上签</span
      >
      <span @click="choose = 2" :class="choose === 2 ? 'choosed' : ''"
        >上签</span
      >
    </p>
    <p>
      <span @click="choose = 3" :class="choose === 3 ? 'choosed' : ''"
        >中签</span
      >
    </p>
    <p>
      <span @click="choose = 4" :class="choose === 4 ? 'choosed' : ''"
        >下签</span
      >
      <span @click="choose = 5" :class="choose === 5 ? 'choosed' : ''"
        >下下签</span
      >
    </p>
    <van-button @disabled="choose === 0" @click="play">抽签</van-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showDialog } from "vant";

// 上上/下下 0.125 ,其他0.25 ，作弊后上上/下下 0.205/0.105 - 0.23， 其他0.105 - 0.33/0.23
const draws = ref<string[]>(["上上签", "上签", "中签", "下签", "下下签"]);
const choose = ref<number>(0);

const play = (): void => {
  let random: number = Math.random(); // 随机数
  let res: number = 0; // 抽签结果: 1/2/3/4/5
  if (choose.value === 1 || choose.value === 5) {
    if (random < 0.205) {
      res = choose.value;
    } else if (random < 0.31) {
      res = choose.value === 1 ? 5 : 1;
    } else if (random < 0.54) {
      res = 2;
    } else if (random < 0.77) {
      res = 3;
    } else {
      res = 4;
    }
  } else if (choose.value === 0) {
    if (random < 0.125) {
      res = 1;
    } else if (random < 0.25) {
      res = 5;
    } else if (random < 0.5) {
      res = 2;
    } else if (random < 0.75) {
      res = 3;
    } else {
      res = 4;
    }
  } else {
    if (random < 0.33) {
      res = choose.value;
    } else if (random < 0.56) {
      // 作弊签为2->此签为3，作弊签为3/4 -> 此签为2;
      res = choose.value === 2 ? 3 : 2;
    } else if (random < 0.79) {
      // 作弊签为3->此签为5，作弊签为4 -> 此签为5，作弊签为5 -> 此签为4;
      res = choose.value === 2 ? 4 : choose.value === 3 ? 4 : 3;
    } else if (random < 0.895) {
      res = 1;
    } else {
      res = 5;
    }
  }

  showDialog({
    title: `${draws.value[res - 1]}`,
    message: "",
  }).then(() => {
    // on close
  });
};
</script>

<style scoped lang="scss">
h4 {
  text-align: center;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    display: flex;
    justify-content: center;
    margin: 0;
    span {
      padding: 10rem 20rem;
      margin: 10rem;
      border: 2px solid #bf9d5e;
      border-radius: 10rem;
    }
    .choosed {
      background-color: #bf9d5e;
      color: #fff;
    }
  }
  .van-button {
    margin-top: 30rem;
    background: #b3744f;
    color: #fff;
  }
}
</style>
